<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>基于百度webuploader封装的上传控件 | 推推蛋</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
    <meta name="keywords" content="朱军函,大兄弟,chuck,BigBrother" />
  
  <meta name="description" content="基于百度webuploader封装的一个上传控件，解决了IE下使用flash上传一些问题，简化了调用过程。 使用方式：    页面引入css文件webuploader.css，js文件jquery.min.js、webuploader.js、uploader.js   在需要生成上传控件的地方添加html代码：&lt;div id&#x3D;&quot;uploader&quot; class&#x3D;&quot;">
<meta property="og:type" content="article">
<meta property="og:title" content="基于百度webuploader封装的上传控件">
<meta property="og:url" content="https://tuituidan.gitee.io/blog/2018/06/18/webuploader/index.html">
<meta property="og:site_name" content="推推蛋">
<meta property="og:description" content="基于百度webuploader封装的一个上传控件，解决了IE下使用flash上传一些问题，简化了调用过程。 使用方式：    页面引入css文件webuploader.css，js文件jquery.min.js、webuploader.js、uploader.js   在需要生成上传控件的地方添加html代码：&lt;div id&#x3D;&quot;uploader&quot; class&#x3D;&quot;">
<meta property="og:locale" content="zh">
<meta property="article:published_time" content="2018-06-17T16:00:00.000Z">
<meta property="article:modified_time" content="2020-06-25T09:08:50.297Z">
<meta property="article:author" content="推推蛋">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="webuploader">
<meta name="twitter:card" content="summary">
  
  
    <link rel="icon" href="/favicon.ico">
  
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  
<link rel="stylesheet" href="/css/style.css">

  
<script src="/js/pace.min.js"></script>

  

  
  

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
  <div id="container">
      <header id="header">
    <div id="banner"></div>
    <div id="header-outer">
        <div id="header-menu" class="header-menu-pos animated">
            <div class="header-menu-container">
                <a href="/" class="left">
                    <span class="site-title">zhujunhan&#39;s Blog</span>
                </a>
                <nav id="header-menu-nav" class="right">
                    
                    <a  href="/">
                        <i class="fa fa-home"></i>
                        <span>首页</span>
                    </a>
                    
                    <a  href="/archives">
                        <i class="fa fa-archive"></i>
                        <span>归档</span>
                    </a>
                    
                    <a  href="/about">
                        <i class="fa fa-user"></i>
                        <span>关于</span>
                    </a>
                    
                </nav>
                <a class="mobile-header-menu-button">
                    <i class="fa fa-bars"></i>
                </a>
            </div>
        </div>
        <div id="header-row">
            <div id="logo">
                <a href="/">
                    <img src="/images/logo.jpg" alt="logo">
                </a>
            </div>
            <div class="header-info">
                <div id="header-title">
                    
                    <h2>
                        0 error 0 warning
                    </h2>
                    
                </div>
                <div id="header-description">
                    
                    <h3>
                        talk is cheap,show me the code
                    </h3>
                    
                </div>
            </div>
            <nav class="header-nav">
                <div class="social">
                    
                        <a title="home" target="_blank" href="//zhujunhan.github.io">
                            <i class="fa fa-home fa-2x"></i></a>
                    
                        <a title="github" target="_blank" href="//github.com/zhujunhan">
                            <i class="fa fa-github fa-2x"></i></a>
                    
                </div>
            </nav>
        </div>
    </div>
</header>
      <div class="outer">
        <section id="main" class="body-wrap"><article id="post-webuploader" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="post-title" itemprop="name">
      基于百度webuploader封装的上传控件
    </h1>
    <div class="post-title-bar">
      <ul>
          
              <li>
                  <i class="fa fa-book"></i>
                  
                      <a href="/categories/前端/">前端</a>
                  
              </li>
          
        <li>
          <i class="fa fa-calendar"></i>  2018-06-18
        </li>
        <li>
          <i class="fa fa-eye"></i>
          <span id="busuanzi_value_page_pv"></span>
        </li>
      </ul>
    </div>
  

          
      </header>
    
    <div class="article-entry post-content" itemprop="articleBody">
      
            
            <p>基于百度<code>webuploader</code>封装的一个上传控件，解决了IE下使用<code>flash</code>上传一些问题，简化了调用过程。</p>
<p><strong>使用方式</strong>：  </p>
<ol>
<li>页面引入css文件<code>webuploader.css</code>，js文件<code>jquery.min.js</code>、<code>webuploader.js</code>、<code>uploader.js</code>  </li>
<li>在需要生成上传控件的地方添加html代码：<code>&lt;div id=&quot;uploader&quot; class=&quot;uploader&quot;&gt;&lt;/div&gt;</code>  </li>
<li>生成控件js代码：<code>var upload = $(&quot;#uploader&quot;).createUploader(params);</code>或<code>或new UploadFile(&quot;upload&quot;,params)</code></li>
</ol>
<blockquote>
<p>params为json对象，设置上传控件初始化参数，参数如下（均有默认值，可选填）</p>
<p><code>extraData</code> ： 额外传到服务器的参数，默认{}，示例：{xxx:123,bbb:’ddg’}<br><code>fileList</code>：初始添加的文件，默认[]，示例：[{name:’name’,ext:’doc’,prevurl:’prevurl’,filepath:’filepath’},{…}]<br><code>maxCount</code>：可添加的上传文件个数，默认9<br><code>submitName</code>：提交值的name属性值，默认”fileName”<br><code>serverUrl</code>：文件上传的服务地址，默认”/api/v1/upload”<br><code>acceptExt</code>：允许上传的文件格式，示例”jpg,jpeg,gif,png,bmp”</p>
<blockquote>
<p>支持格式包括：png,jpg,jpeg,gif,bmp,flv,swf,mkv,avi,rm,rmvb,mpeg,mpg,ogg,ogv,mov,wmv,mp4,webm,mp3,wav,mid,rar,zip,tar,gz,7z,bz2,cab,iso,doc,docx,xls,xlsx,ppt,pptx,pdf,txt,md,xml</p>
</blockquote>
<p><code>autoload</code>：选择文件后是否自动上传，默认false,</p>
<blockquote>
<p>true表示添加文件后自动上传，上传后得到的文件路径为上面设置的name为submitName的值的input标签的值。</p>
<p>false表示不自动上传，则需要添加上传按钮进行上传，调用下面的代码可获得上传文件路径</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">upload.uploadFile(function(vals) &#123;</span><br><span class="line">   console.log(vals);</span><br><span class="line">&#125;); </span><br></pre></td></tr></table></figure>


</blockquote>
<p><code>promptText</code>：显示在上传控件的下面的一行字，作为提示，提高用户体验，示例”提示：最多可同时上传3个文件，每个文件不超过100M。”</p>
</blockquote>
<p><strong>封装说明</strong></p>
<ul>
<li><p>支持设置初始值，如编辑商品的时候，商品图片已经上传了一些，就需要以新增时一样的方式显示出来。</p>
</li>
<li><p>根据传入的支持的文件格式自动生成<code>accept</code>属性，可在选择文件框中自动过滤掉不支持的格式。</p>
</li>
<li><p>自动检测<code>Uploader.swf</code>的路径。</p>
<blockquote>
<p>因为<code>Uploader.swf</code>传入的路径必须是相对于当前html页面的路径，但项目中各个上传页面路径都不一样，所以无法设置统一的值。</p>
</blockquote>
</li>
<li><p>解决使用flash上传时，添加文件达到最大支持个数，隐藏上传按钮后，再移除文件后上传按钮不显示的问题。</p>
<blockquote>
<p>使用flash上传时，上传按钮不能用jq的hide方法（即css的display:none）来隐藏，需要用样式</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.webuploader-element-invisible &#123;</span><br><span class="line">	position: absolute !important;</span><br><span class="line">	clip: rect(1px 1px 1px 1px); </span><br><span class="line">    clip: rect(1px,1px,1px,1px);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>来控制</p>
</blockquote>
</li>
<li><p>添加ocx解决IE下flash被禁用的问题。</p>
<blockquote>
<p>在IE低版本使用flash上传时，如果flash安装了只是被禁用了，webuploader源码中的方法也会检测为没安装（实际也是js是无法检测windows组件是否安装的），所以添加<code>Flash11e.ocx</code>来强行提示用户开启</p>
</blockquote>
</li>
<li><p>下调flash支持版本为11.1</p>
<blockquote>
<p>源码中要求的flash版本至少为11.4，实际生产环境客户正好用的11.1，下调为11.1测试后发现仍然正常</p>
</blockquote>
</li>
</ul>
<p>*<em>封装源码移步<a href="https://github.com/zhujunhan/webuploader" target="_blank" rel="noopener" title="webuploader">GitHub</a> *</em></p>

            <div class="post-copyright">
    <div class="content">
        <p>最后更新： 2020年06月25日 17:08</p>
        <p>原始链接： <a class="post-url" href="/2018/06/18/webuploader/" title="基于百度webuploader封装的上传控件">https://tuituidan.gitee.io/blog/2018/06/18/webuploader/</a></p>
        <footer>
            <a href="https://tuituidan.gitee.io/blog">
                <img src="/images/logo.jpg" alt="推推蛋">
                推推蛋
            </a>
        </footer>
    </div>
</div>

      
        
            
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;">赏</a>
</div>

<div id="reward" class="post-modal reward-lay">
    <a class="close" href="javascript:;" id="reward-close">×</a>
    <span class="reward-title">
        <i class="icon icon-quote-left"></i>
        有用就请我喝咖啡吧
        <i class="icon icon-quote-right"></i>
    </span>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/images/wechat_code.jpg" alt="打赏二维码">
        </div>
        <div class="reward-select">
            
            <label class="reward-select-item checked" data-id="wechat" data-wechat="/images/wechat_code.jpg">
                <img class="reward-select-item-wechat" src="/images/wechat.png" alt="微信">
            </label>
            
            
            <label class="reward-select-item" data-id="alipay" data-alipay="/images/alipay_code.jpg">
                <img class="reward-select-item-alipay" src="/images/alipay.png" alt="支付宝">
            </label>
            
        </div>
    </div>
</div>


        
    </div>
    <footer class="article-footer">
        
        
<div class="post-share">
    <a href="javascript:;" id="share-sub" class="post-share-fab">
        <i class="fa fa-share-alt"></i>
    </a>
    <div class="post-share-list" id="share-list">
        <ul class="share-icons">
          <li>
            <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/&title=《基于百度webuploader封装的上传控件》 — 推推蛋&pic=cover_picture/webuploader.png" data-title="微博">
              <i class="fa fa-weibo"></i>
            </a>
          </li>
          <li>
            <a class="weixin share-sns" id="wxFab" href="javascript:;" data-title="微信">
              <i class="fa fa-weixin"></i>
            </a>
          </li>
          <li>
            <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/&title=《基于百度webuploader封装的上传控件》 — 推推蛋&source=" data-title="QQ">
              <i class="fa fa-qq"></i>
            </a>
          </li>
          <li>
            <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/" data-title="Facebook">
              <i class="fa fa-facebook"></i>
            </a>
          </li>
          <li>
            <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《基于百度webuploader封装的上传控件》 — 推推蛋&url=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/&via=https://tuituidan.gitee.io/blog" data-title="Twitter">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li>
            <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/" data-title="Google+">
              <i class="fa fa-google-plus"></i>
            </a>
          </li>
        </ul>
     </div>
</div>
<div class="post-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;" id="wxShare-close">×</a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=https://tuituidan.gitee.io/blog/2018/06/18/webuploader/" alt="微信分享二维码">
</div>

<div class="mask"></div>

        
        <ul class="article-footer-menu">
            
            
  <li class="article-footer-tags">
    <i class="fa fa-tags"></i>
      
    <a href="/tags/前端/" class="color3">前端</a>
      
    <a href="/tags/webuploader/" class="color2">webuploader</a>
      
  </li>

        </ul>
        
    </footer>
  </div>
</article>



<nav id="article-nav">
  
    <a href="/2020/07/19/hello-world/" id="article-nav-newer" class="article-nav-link-wrap">

      <span class="article-nav-title">
        <i class="fa fa-hand-o-left" aria-hidden="true"></i>
        
          Hello World
        
      </span>
    </a>
  
  
    <a href="/2017/06/18/Disruptor/" id="article-nav-older" class="article-nav-link-wrap">
      <span class="article-nav-title">Disruptor</span>
      <i class="fa fa-hand-o-right" aria-hidden="true"></i>
    </a>
  
</nav>



    
        <link rel="stylesheet" href="//unpkg.com/gitment/style/default.css">
    <script src="//unpkg.com/gitment/dist/gitment.browser.js"></script>
    <div id="comments">
        <script>
            var gitment = new Gitment({
                owner: 'zhujunhan',
                repo: 'zhujunhan.github.io',
                oauth: {
                    client_id: 'c2c63d0ea4d9d2d02a69',
                    client_secret: '453c28c988d7d00d5b81d1b3f703295b809d5500',
                },
            })
            gitment.render('comments')
        </script>
    </div>

    
</section>
        
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


      <p>
        Copyright
      &copy; 2020 推推蛋<br>
      </p>
    </div>
  </div>
</footer>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  var mihoConfig = {
      root: "https://tuituidan.gitee.io/blog",
      animate: true,
      isHome: false,
      share: true,
      reward: 1
  }
</script>
<div class="sidebar">
    <div id="sidebar-search" title="Search">
        <i class="fa fa-search"></i>
    </div>
    <div id="sidebar-category" title="Categories">
        <i class="fa fa-book"></i>
    </div>
    <div id="sidebar-tag" title="Tags">
        <i class="fa fa-tags"></i>
    </div>
    <div id="sidebar-top">
        <span class="sidebar-top-icon"><i class="fa fa-angle-up"></i></span>
    </div>
</div>
<div class="sidebar-menu-box" id="sidebar-menu-box">
    <div class="sidebar-menu-box-container">
        <div id="sidebar-menu-box-categories">
            <a class="category-link" href="/categories/Disruptor/">Disruptor</a><a class="category-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        </div>
        <div id="sidebar-menu-box-tags">
            <a href="/tags/Disruptor/" style="font-size: 20px;">Disruptor</a> <a href="/tags/RingBuffer/" style="font-size: 20px;">RingBuffer</a> <a href="/tags/webuploader/" style="font-size: 10px;">webuploader</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a>
        </div>
    </div>
    <a href="javascript:;" class="sidebar-menu-box-close">&times;</a>
</div>
<div class="mobile-header-menu-nav" id="mobile-header-menu-nav">
    <div class="mobile-header-menu-container">
        <span class="title">菜单</span>
        <ul class="mobile-header-menu-navbar">
            
            <li>
                <a  href="/">
                    <i class="fa fa-home"></i><span>首页</span>
                </a>
            </li>
            
            <li>
                <a  href="/archives">
                    <i class="fa fa-archive"></i><span>归档</span>
                </a>
            </li>
            
            <li>
                <a  href="/about">
                    <i class="fa fa-user"></i><span>关于</span>
                </a>
            </li>
            
        </ul>
    </div>
    <div class="mobile-header-tag-container">
        <span class="title">标签</span>
        <div id="mobile-header-container-tags">
            <a href="/tags/Disruptor/" style="font-size: 20px;">Disruptor</a> <a href="/tags/RingBuffer/" style="font-size: 20px;">RingBuffer</a> <a href="/tags/webuploader/" style="font-size: 10px;">webuploader</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a>
        </div>
    </div>
</div>
<div class="search-wrap">
    <span class="search-close">&times;</span>
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
            <i class="icon icon-lg icon-chevron-left"></i>
        </a>
        <input class="search-field" placeholder="搜索..." id="keywords">
        <a id="search-submit" href="javascript:;">
            <i class="fa fa-search"></i>
        </a>
    <div class="search-container" id="search-container">
        <ul class="search-result" id="search-result">
        </ul>
    </div>
</div>

<div id="search-tpl">
    <li class="search-result-item">
        <a href="{url}" class="search-item-li">
            <span class="search-item-li-title" title="{title}">{title}</span>
        </a>
    </li>
</div>

<script src="/js/search.js"></script>


<script src="/js/main.js"></script>









  
<link rel="stylesheet" href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css">

  <script src="//cdn.bootcss.com/scrollReveal.js/3.0.5/scrollreveal.js"></script>
  
<script src="/js/animate.js"></script>



  
<script src="/js/pop-img.js"></script>

  <script>
     $(".article-entry p img").popImg();
  </script>

  </div>
</body>
</html>